<!--
 * Copyright 2019 ia-cloud project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 -->

<script type="text/html" data-template-name="EnOcean-com">
    <div class="form-row">
        <label for="node-config-input-emu" style="width: 200px;"><span data-i18n="editor.emu"></span></label>
        <input type="checkbox" id="node-config-input-emu" style="display: inline-block; width: auto;" >
    </div>
    <div class="form-row" id="dummySensorId">
        <label for="node-config-input-dummySensorId" style="width: 200px;"><span data-i18n="editor.dummySensorId"></span></label>
        <input type="text" id="node-config-input-dummySensorId" style="display: inline-block; width: auto;" readonly>
    </div>
    <div class="form-row" id="cycle">
        <label for="node-config-input-cycle" style="width: 200px;"><span data-i18n="editor.cycle"></span></label>
        <input type="number" id="node-config-input-cycle" style="display: inline-block; width: auto;" readonly>
        <label for="node-config-input-cycleSec"><span data-i18n="editor.cycleSec"></span></label>
    </div>
    <div class="form-row" id="serialPort-block">
        <label for="node-config-input-serialPort" style="width: 120px;"><i class="fa fa-random"></i><span data-i18n="editor.serialPort"></span></label>
        <input type="text" id="node-config-input-serialPort" required="required" style="width:60%;" data-i18n="[placeholder]editor.serialPort">
        <a id="node-config-lookup-serial" class="red-ui-button"><i id="node-config-lookup-serial-icon" class="fa fa-search"></i></a>
    </div>
    <hr>
    <div class="form-row">
        <label for="node-config-input-name"><i class="fa fa-tag"></i>
            <span data-i18n="editor.name"></span></label>
        <input type="text" id="node-config-input-name" data-i18n="[placeholder]editor.name">
    </div>
</script>


<script type="text/javascript">
    RED.nodes.registerType('EnOcean-com',{
        
        category: 'config',
        defaults: {
            name: {value:""},
            emu: {value: false,},
            dummySensorId: {value: 'FFFFFFFF',},
            cycle: {value: 30,},
            serialPort:{value:"" },
        },
        label: function () {
            return this.name||this._("editor.label");
        },

        oneditprepare: function() {
            let node = this;

            // when emulation checkbox changed
            $("#node-config-input-emu").on("change", function() {
                if ($("#node-config-input-emu").prop("checked")) {
                    $("#dummySensorId").prop("hidden", false);
                    $("#cycle").prop("hidden", false);
                    $("#serialPort-block").prop("hidden", true);
                    $("#node-config-input-serialPort").prop("required", false);
                }
                else {
                    $("#dummySensorId").prop("hidden", true);
                    $("#cycle").prop("hidden", true);
                    $("#serialPort-block").prop("hidden", false);
                    $("#node-config-input-serialPort").prop("required", true);
                }
            });
            $("#node-config-input-emu").trigger("change");

            // シリアルポートルックアップが押されたら
            $("#node-config-lookup-serial").click(function() {
                $("#node-config-lookup-serial").addClass('disabled');
                $.getJSON('serialports',function(data) {
                    $("#node-config-lookup-serial").removeClass('disabled');
                    var ports = data || [];
                    $("#node-config-input-serialPort").autocomplete({
                        source:ports,
                        minLength:0,
                        close: function( event, ui ) {
                            $("#node-config-input-serialPort").autocomplete( "destroy" );
                        }
                    }).autocomplete("search","");
                });
            });
        },

    });
</script>
